import React, { Component } from "react";
import "./home.scss";
import { Tag } from "antd";
import echarts from "echarts/lib/echarts";
import echartsGL from "echarts-gl";
import "echarts/map/js/world.js";
import Piemap from "./piemap";
import Map from "./echo";
import metet from "./metet";
import Metet from "./metet";
import Histogram from "./histogram";

var nameMap = {
  "Singapore Rep.": "新加坡",
  "Dominican Rep.": "多米尼加",
  Palestine: "巴勒斯坦",
  Bahamas: "巴哈马",
  "Timor-Leste": "东帝汶",
  Afghanistan: "阿富汗",
  "Guinea-Bissau": "几内亚比绍",
  "Côte d'Ivoire": "科特迪瓦",
  "Siachen Glacier": "锡亚琴冰川",
  "Br. Indian Ocean Ter.": "英属印度洋领土",
  Angola: "安哥拉",
  Albania: "阿尔巴尼亚",
  "United Arab Emirates": "阿联酋",
  Argentina: "阿根廷",
  Armenia: "亚美尼亚",
  "French Southern and Antarctic Lands": "法属南半球和南极领地",
  Australia: "澳大利亚",
  Austria: "奥地利",
  Azerbaijan: "阿塞拜疆",
  Burundi: "布隆迪",
  Belgium: "比利时",
  Benin: "贝宁",
  "Burkina Faso": "布基纳法索",
  Bangladesh: "孟加拉国",
  Bulgaria: "保加利亚",
  "The Bahamas": "巴哈马",
  "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
  Belarus: "白俄罗斯",
  Belize: "伯利兹",
  Bermuda: "百慕大",
  Bolivia: "玻利维亚",
  Brazil: "巴西",
  Brunei: "文莱",
  Bhutan: "不丹",
  Botswana: "博茨瓦纳",
  "Central African Rep.": "中非",
  Canada: "加拿大",
  Switzerland: "瑞士",
  Chile: "智利",
  China: "中国",
  "Ivory Coast": "象牙海岸",
  Cameroon: "喀麦隆",
  "Dem. Rep. Congo": "刚果民主共和国",
  Congo: "刚果",
  Colombia: "哥伦比亚",
  "Costa Rica": "哥斯达黎加",
  Cuba: "古巴",
  "N. Cyprus": "北塞浦路斯",
  Cyprus: "塞浦路斯",
  "Czech Rep.": "捷克",
  Germany: "德国",
  Djibouti: "吉布提",
  Denmark: "丹麦",
  Algeria: "阿尔及利亚",
  Ecuador: "厄瓜多尔",
  Egypt: "埃及",
  Eritrea: "厄立特里亚",
  Spain: "西班牙",
  Estonia: "爱沙尼亚",
  Ethiopia: "埃塞俄比亚",
  Finland: "芬兰",
  Fiji: "斐济",
  "Falkland Islands": "福克兰群岛",
  France: "法国",
  Gabon: "加蓬",
  "United Kingdom": "英国",
  Georgia: "格鲁吉亚",
  Ghana: "加纳",
  Guinea: "几内亚",
  Gambia: "冈比亚",
  "Guinea Bissau": "几内亚比绍",
  "Eq. Guinea": "赤道几内亚",
  Greece: "希腊",
  Greenland: "格陵兰",
  Guatemala: "危地马拉",
  "French Guiana": "法属圭亚那",
  Guyana: "圭亚那",
  Honduras: "洪都拉斯",
  Croatia: "克罗地亚",
  Haiti: "海地",
  Hungary: "匈牙利",
  Indonesia: "印度尼西亚",
  India: "印度",
  Ireland: "爱尔兰",
  Iran: "伊朗",
  Iraq: "伊拉克",
  Iceland: "冰岛",
  Israel: "以色列",
  Italy: "意大利",
  Jamaica: "牙买加",
  Jordan: "约旦",
  Japan: "日本",
  Kazakhstan: "哈萨克斯坦",
  Kenya: "肯尼亚",
  Kyrgyzstan: "吉尔吉斯斯坦",
  Cambodia: "柬埔寨",
  Korea: "韩国",
  Kosovo: "科索沃",
  Kuwait: "科威特",
  "Lao PDR": "老挝",
  Lebanon: "黎巴嫩",
  Liberia: "利比里亚",
  Libya: "利比亚",
  "Sri Lanka": "斯里兰卡",
  Lesotho: "莱索托",
  Lithuania: "立陶宛",
  Luxembourg: "卢森堡",
  Latvia: "拉脱维亚",
  Morocco: "摩洛哥",
  Moldova: "摩尔多瓦",
  Madagascar: "马达加斯加",
  Mexico: "墨西哥",
  Macedonia: "马其顿",
  Mali: "马里",
  Myanmar: "缅甸",
  Montenegro: "黑山",
  Mongolia: "蒙古",
  Mozambique: "莫桑比克",
  Mauritania: "毛里塔尼亚",
  Malawi: "马拉维",
  Malaysia: "马来西亚",
  Namibia: "纳米比亚",
  "New Caledonia": "新喀里多尼亚",
  Niger: "尼日尔",
  Nigeria: "尼日利亚",
  Nicaragua: "尼加拉瓜",
  Netherlands: "荷兰",
  Norway: "挪威",
  Nepal: "尼泊尔",
  "New Zealand": "新西兰",
  Oman: "阿曼",
  Pakistan: "巴基斯坦",
  Panama: "巴拿马",
  Peru: "秘鲁",
  Philippines: "菲律宾",
  "Papua New Guinea": "巴布亚新几内亚",
  Poland: "波兰",
  "Puerto Rico": "波多黎各",
  "Dem. Rep. Korea": "朝鲜",
  Portugal: "葡萄牙",
  Paraguay: "巴拉圭",
  Qatar: "卡塔尔",
  Romania: "罗马尼亚",
  Russia: "俄罗斯",
  Rwanda: "卢旺达",
  "W. Sahara": "西撒哈拉",
  "Saudi Arabia": "沙特阿拉伯",
  Sudan: "苏丹",
  "S. Sudan": "南苏丹",
  Senegal: "塞内加尔",
  "Solomon Is.": "所罗门群岛",
  "Sierra Leone": "塞拉利昂",
  "El Salvador": "萨尔瓦多",
  Somaliland: "索马里兰",
  Somalia: "索马里",
  Serbia: "塞尔维亚",
  Suriname: "苏里南",
  Slovakia: "斯洛伐克",
  Slovenia: "斯洛文尼亚",
  Sweden: "瑞典",
  Swaziland: "斯威士兰",
  Syria: "叙利亚",
  Chad: "乍得",
  Togo: "多哥",
  Thailand: "泰国",
  Tajikistan: "塔吉克斯坦",
  Turkmenistan: "土库曼斯坦",
  "East Timor": "东帝汶",
  "Trinidad and Tobago": "特里尼达和多巴哥",
  Tunisia: "突尼斯",
  Turkey: "土耳其",
  Tanzania: "坦桑尼亚",
  Uganda: "乌干达",
  Ukraine: "乌克兰",
  Uruguay: "乌拉圭",
  "United States": "美国",
  Uzbekistan: "乌兹别克斯坦",
  Venezuela: "委内瑞拉",
  Vietnam: "越南",
  Vanuatu: "瓦努阿图",
  "West Bank": "西岸",
  Yemen: "也门",
  "South Africa": "南非",
  Zambia: "赞比亚",
  Zimbabwe: "津巴布韦",
  Asia: "亚洲",
  Africa: "非洲",
  Europe: "欧洲",
  "North America": "北美洲",
  "South America": "南美洲",
  Oceania: "大洋洲",
};

class Home extends Component {
  state = {
    name: "地址",
  };

  componentDidMount() {
    this.loadPie();
  }

names = this.state.name
  loadPie(names) {
    var canvas = document.createElement("canvas");
    var myChart = echarts.init(canvas, null, {
      width: 4096,
      height: 2048,
    });

    var geoCoordMap = {
      南宁: [108.479, 23.1152],
      广州: [113.5107, 23.2196],
      重庆: [107.7539, 30.1904],
      芬兰: [24.909912, 60.169095],
      美国: [-100.696295, 33.679979],
      日本: [139.710164, 35.706962],
      韩国: [126.979208, 37.53875],
      瑞士: [7.445147, 46.956241],
      东南亚: [117.53244, 5.300343],
      澳大利亚: [135.193845, -25.304039],
      德国: [13.402393, 52.518569],
      英国: [-0.126608, 51.208425],
      加拿大: [-102.646409, 59.994255],
      新疆: [84.9023, 41.748],
    };

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[1].name];
        var toCoord = geoCoordMap[dataItem[0].name];
        if (fromCoord && toCoord) {
          res.push([fromCoord, toCoord]);
        }
      }
      console.log(res);
      return res;
    };

    let option = {
      backgroundColor: "rgba(0,0,0,0)", //canvas的背景颜色
      title: {
        text: names,
        x: "center",
        textStyle: {
          color: "#fff"
        }
      },
      globe: {

        // baseTexture: '../../assets/images/20200116171759181.jpg',
        // heightTexture: '../../assets/images/20200116171759181.jpg',
        baseTexture: myChart,
        heightTexture: "../../assets/images/20200116171759181.jpg",
        shading: "lambert",
        light: {
          ambient: {
            intensity: 1,
          },
          main: {
            intensity: 1,
          },
        },
        top: "middle",
        left: "center",
        displacementScale: 0,
        // environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //     offset: 0, color: '#00aaff' // 天空颜色
        // }, {
        //     offset: 0.7, color: '#998866' // 地面颜色
        // }, {
        //     offset: 1, color: '#998866' // 地面颜色
        // }], false),
        environment: null,
        viewControl: {
          distance: 240,
          autoRotate: true,
        },

      },
      series: [
        {
          type: "lines3D",
          effect: {
            show: true,
            period: 3, //速度
            trailLength: 0.1, //尾部阴影
          },
          lineStyle: {
            //航线的视图效果
            color: "#9ae5fc",
            width: 1,
            opacity: 0.6,
          },
          // convertData
          data: [
            [
              [-102.646409, 59.994255],
              [108.479, 23.1152],
            ],
            [
              [-100.696295, 33.679979],
              [108.479, 23.1152],
            ],
            [
              [-102.646409, 59.994255],
              [107.7539, 30.1904],
            ],
            [
              [117.53244, 5.300343],
              [108.479, 23.1152],
            ],
            [
              [116.46, 39.92],
              [113.2614288, 23.1189117],
            ],
            [
              [117.0056, 36.6670723],
              [113.2614288, 23.1189117],
            ],
            [
              [117.0056, 36.6670723],
              [101.7874527, 36.6094475],
            ],
            [
              [114.2919388, 30.5675144],
              [106.54, 29.59],
            ],
            [
              [126.6433411, 45.7414932],
              [116.46, 39.92],
            ],
            [
              [126.6433411, 45.7414932],
              [102.704567, 25.0438442],
            ],
            [
              [84.9023, 41.748],
              [117.53244, 5.300343],
            ],
            [
              [84.9023, 41.748],
              [104.0817566, 30.6610565],
            ],
            [
              [121.48, 31.22],
              [117.0056, 36.6670723],
            ],
            [
              [121.48, 31.22],
              [111.6632996, 40.8209419],
            ],
            [
              [119.2978134, 26.0785904],
              [121.48, 31.22],
            ],
            [
              [119.2978134, 26.0785904],
              [108.479, 23.1152],
            ],
            [
              [91.1320496, 29.657589],
              [87.6061172, 43.7909393],
            ],
            [
              [91.1320496, 29.657589],
              [108.949028, 34.2616844],
            ],
            [
              [108.949028, 34.2616844],
              [87.6061172, 43.7909393],
            ],
            [
              [108.949028, 34.2616844],
              [111.6632996, 40.8209419],
            ],
            [
              [108.949028, 34.2616844],
              [121.48, 31.22],
            ],
          ],
        },
      ],
    };

    myChart.setOption({
      backgroundColor: "rgba(3,28,72,1)",
      geo: {
        type: "map",
        map: "world",
        nameMap: nameMap,
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        boundingCoords: [
          [-180, 90],
          [180, -90],
        ],
        zoom: 0,
        roam: false,
        itemStyle: {
          borderColor: "#000d2d",
          normal: {
            areaColor: "#2455ad",
            borderColor: "#000c2d",
          },
          emphasis: {
            areaColor: "#357cf8",
          },
        },

        label: {
          fontSize: 24,
        },
        regions: [
          {
            name: "中国",
            selected: true,
            itemStyle: {
              normal: {
                borderColor: "#b2a471",
              },
            },
          },
        ],
      },
      series: [
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 3,
          rippleEffect: {
            brushType: "stroke",
          },
          label: {
            fontSize: 24,
            show: true,
            position: "right",
            formatter: "{b}",
          },
          itemStyle: {
            normal: {
              color: "#f5f802",
            },
          },
          data: [
            { name: "瑞士", value: [-102.646409, 59.994255], symbolSize: 20 },
            { name: "加拿大", value: [-100.696295, 33.679979], symbolSize: 20 },
          ],
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 3,
          rippleEffect: {
            brushType: "stroke",
          },
          label: {
            normal: {
              show: true,
              position: "left",
              fontSize: 18,
              formatter: "{b}",
            },
          },
          itemStyle: {
            normal: {
              color: "#ff0000",
            },
          },
          data: [
            { name: "南宁", value: [108.479, 23.1152], symbolSize: 20 },
            { name: "新疆", value: [84.9023, 41.748], symbolSize: 10 },
            { name: "天津", value: [117.2523808, 39.1038561], symbolSize: 10 },
            { name: "北京", value: [116.46, 39.92], symbolSize: 10 },
            { name: "上海", value: [121.48, 31.22], symbolSize: 10 },
            { name: "重庆", value: [106.54, 29.59], symbolSize: 10 },
            { name: "辽宁", value: [123.38, 41.8], symbolSize: 0 },
            { name: "黑龙江", value: [126.6433411, 45.7414932] },
            { name: "浙江", value: [120.1592484, 30.265995] },
            { name: "福建", value: [119.2978134, 26.0785904] },
            { name: "山东", value: [117.0056, 36.6670723] },
            { name: "河南", value: [113.6500473, 34.7570343] },
            { name: "湖北", value: [114.2919388, 30.5675144] },
            { name: "湖南", value: [112.9812698, 28.2008247] },
            { name: "广东", value: [113.2614288, 23.1189117] },
            { name: "海南", value: [110.3465118, 20.0317936] },
            { name: "四川", value: [104.0817566, 30.6610565] },
            { name: "贵州", value: [106.7113724, 26.5768738] },
            { name: "云南", value: [102.704567, 25.0438442] },
            { name: "江西", value: [115.8999176, 28.6759911] },
            { name: "陕西", value: [108.949028, 34.2616844] },
            { name: "青海", value: [101.7874527, 36.6094475] },
            { name: "甘肃", value: [103.7500534, 36.0680389] },
            { name: "广西", value: [108.3117676, 22.8065434] },
            { name: "新疆", value: [87.6061172, 43.7909393] },
            { name: "内蒙古", value: [111.6632996, 40.8209419] },
            { name: "西藏", value: [91.1320496, 29.657589] },
          ],
        },
      ],
    });

    echarts.init(document.getElementById("container")).setOption(option, true);
    // 地图点击事件
    myChart.on("click", (params) => {
      let componentType = params.componentType; // geo是地图图层
      let province = params.name;
      console.log(params);
      if (componentType == "geo") {
        this.setState({
          name: province,
        });
      }
    });
  }

  render() {
    return (
      <div>

        <div className="box">
          <div className="boxone">

            <div><Piemap /></div>

            <div>2</div>
          </div>

          <div className="boxone">
            <div id="container"></div>
            <div><Map /></div>
          </div>

          <div className="boxone">
            <div><Metet /></div>
            <div><Histogram /> </div>
          </div>
        </div>

      </div>
    );
  }
}

export default Home;
